<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="查看" v-model="visible" width="1360px" @close="handleClose">
    <el-form ref="formRef" :model="form" :label-width="140" v-loading="loadings.detail" element-loading-background="rgba(122, 122, 122, 0.6)"
      class="h-full overflow-y-auto overflow-x-hidden">
      <div class="v-title mb-3">基础信息</div>
      <div class="grid grid-cols-4 gap-y-2 text-gray-950">
        <VText title="采购单号" :value="form.basic.purchase_no" />
        <VText title="订单来源" :value="form.basic.order_source_name" />
        <VText title="下单时间" :value="form.basic.create_time" />
        <VText title="备货方式" :value="form.basic.prepare_type_name" />
        <VText title="目的仓库" :value="form.basic.destination_warehouse_name" />
        <VText title="供应商" :value="form.basic.supplier_name" />
        <VText title="供应商类型" :value="form.basic.purchase_type_name" />
        <VText title="业务状态" :value="form.basic.purchase_status_name" />
        <VText title="是否开票" :value="form.basic.is_invoice_name" />
        <VText title="是否退税" :value="form.basic.is_drawback_name" />
        <VText title="结算方式" :value="form.basic.period_name" />
        <VText title="结算币种" :value="form.basic.currency_name" />
        <VText title="公司主体" :value="form.basic.company_id_name" />
        <VText title="支付账号" :value="form.basic.alipay_account" />
        <VText title="付款方式" :value="form.basic.payment_type_name" />
        <VText title="财务状态" :value="form.basic.finance_status_name" />
        <VText title="采购人员" :value="form.basic.purchase_user" />
        <VText title="物流单号" :value="form.basic.tracking_no?.join(',')" type="button" @click="() => trackingRef.open(form.basic.tracking_no)" />
        <VText title="订单备注" :value="form.basic.remark" />
        <VText title="合同号" :value="form.basic.contract_no" />
        <div class="col-span-2">
          <VText title="平台单号">
            <template v-if="form.basic.platform_order_no">
              <el-link :href="`https://trade.1688.com/order/new_step_order_detail.htm?orderId=${form.basic.platform_order_no}`" target="_blank"
                type="primary">{{ form.basic.platform_order_no }}</el-link>
              <el-button link type="primary" class="ml-0" @click="platformVisible = true">详情</el-button>
              <a target="_blank" :href="`https://air.1688.com/app/ocms-fusion-components-1688/def_cbu_web_im/index.html?touid=cnalichn${form.basic.platform_data.seller_id}`">
                <img border="0" src="https://xc2k-pms.oss-cn-shenzhen.aliyuncs.com/icon/wangwang.gif" alt="联系卖家" title="联系卖家">
              </a>
            </template>
            <div v-else>-</div>
          </VText>
        </div>
      </div>
      <div>
        <div class="v-title my-3">产品信息</div>
        <div class="flex gap-10 text-[#333] mb-1">
          <div>总计</div>
          <div><span>产品总数量: </span>{{ form.basic.purchase_num }}</div>
          <div><span>产品总额: </span>{{ form.basic.is_drawback === 2 ? form.basic.total_price_tax :
            form.basic.total_price }}</div>
          <div><span>总运费: </span>{{ form.basic.tracking_price }}</div>
          <div><span>总优惠: </span>{{ form.basic.discount_price }}</div>
          <div><span>采购总成本: </span>{{ form.basic.is_drawback === 2 ?
            form.basic.total_purchase_price_tax : form.basic.total_purchase_price }}</div>
          <div><span>应付金额: </span>{{ form.basic.is_drawback === 2 ?
            form.basic.purchase_price_tax : form.basic.purchase_price }}</div>
          <div><span>到货金额: </span>{{ form.basic.is_drawback === 2 ?
            form.basic.deliver_price_tax : form.basic.deliver_price }}</div>
        </div>
        <vxe-table ref="tableRef" :data="form.sku" size="small" :max-height="560" :show-overflow="true" :row-config="{height: 120}">
          <vxe-column title="订单来源" :min-width="140">
            <template #default="{ row }">
              <VText :value="row.order_source_name" />
              <VText title="来源单号" :value="row.source_no" title-position="top" />
              <VText title='是否退税' :value="row?.product?.is_refund_tax_name" />
            </template>
          </vxe-column>
          <vxe-column title="sku" :min-width="200">
            <template #default="{ row }">
              <VText title="需求ID" :value="row.sku_no" />
              <VText title="平台" :value="row.platform_name" />
              <VText :value="row.sku" type="link" @click="to({ path: '/goods/task/product/edit', query: { spuId: row.product.spu_id, type: 'view', } })">
                <span class='whitespace-nowrap'>{{row.sku}}</span>
                <el-tag v-if="row.is_new === 2" type="success" effect="dark" class='mx-1'>新</el-tag>
                <el-tag v-if="row.is_special_purchase === 2" type="danger" effect="dark">特</el-tag>
              </VText>
              <VText title="自定义sku" :value="row.product.custom_sku" />
              <div class="flex items-center gap-2">
                <VText value="历史采购记录" type="button" @click="historyRef.open(row.sku)" />
                <el-popover v-if="row.is_combination === 2" placement="right" :width="400">
                  <template #reference>
                    <el-button type="danger" circle size="small" class="scale-90"><span class="text-xs">组</span></el-button>
                  </template>
                  <el-table :data="row.combination_data" size="small">
                    <el-table-column property="origin_sku" label="组合SKU" />
                    <el-table-column property="sku" label="子SKU" />
                    <el-table-column property="sku_num" label="子SKU比例数" />
                  </el-table>
                </el-popover>
              </div>
            </template>
          </vxe-column>
          <vxe-column title="图片" :min-width="80">
            <template #default="{ row }">
              <VImage v-if="row.product" :src="row.product.main_img" size="60px"></VImage>
            </template>
          </vxe-column>
          <vxe-column title="产品名称" :min-width="140">
            <template #default="{ row }">
              <VText v-if="row.product" :value="row.product.sku_cn_title" line="4" />
            </template>
          </vxe-column>
          <vxe-column title="产品链接" :min-width="140">
            <template #default="{ row }">
              <VText v-if="row.product" :value="row.product.goods_link" type="link" />
            </template>
          </vxe-column>
          <vxe-column title="产品属性" :min-width="140">
            <template #default="{ row }">
              <VText title="长" :value="row.packing_size_cm_length+'cm'" />
              <VText title="宽" :value="row.packing_size_cm_width+'cm'" />
              <VText title="高" :value="row.packing_size_cm_height+'cm'" />
              <VText title="毛重" :value="row.gross_weight_g+'g'" />
              <VText title="体积" :value="(row.packing_size_m_volume || 0)+'m³'" />
            </template>
          </vxe-column>
          <vxe-column title="报关信息" :min-width="180">
            <template #default="{ row }">
              <VText title="报关名称" :value="row.invoice_name" />
              <VText title="报关单位" :value="row.invoice_unit" />
              <VText title="报关编码" :value="row.customs_code" />
            </template>
          </vxe-column>
          <vxe-column title="下单数量" field="purchase_num" :min-width="80" />
          <vxe-column title="产品单价" :min-width="80">
            <template #default="{ row }">
              {{ form.basic.is_drawback === 2 ? row.unit_price_tax : row.unit_price }}
            </template>
          </vxe-column>
          <vxe-column title="运费分摊" field="tracking_price" :min-width="80" />
          <vxe-column title="折扣分摊" field="discount_price" :min-width="80" />
          <vxe-column title="单个采购成本" :min-width="100">
            <template #default="{ row }">
              {{ form.basic.is_drawback === 2 ? row.unit_purchase_price_tax : row.unit_purchase_price }}
            </template>
          </vxe-column>
          <vxe-column title="产品总金额" :min-width="90">
            <template #default="{ row }">
              {{ form.basic.is_drawback === 2 ? row.total_price_tax : row.total_price }}
            </template>
          </vxe-column>
          <vxe-column title="采购总成本" :min-width="90">
            <template #default="{ row }">
              {{ form.basic.is_drawback === 2 ? row.total_purchase_price_tax : row.total_purchase_price }}
            </template>
          </vxe-column>
          <vxe-column title="预计到货时间" :min-width="140">
            <template #default="{ row }">
              <template v-if="row.origin_expect_delivery_time">
                <div><span class='text-gray-500'>初始: </span>{{ row.origin_expect_delivery_time }}</div>
                <div v-for="(d, i) in row.skuChangeDeliver.slice(0, 3)" :key="i"><span class='text-gray-500'>{{ ['一', '二', '三'][i]
                }}改:
                  </span>{{ d.expect_delivery_time }}</div>
              </template>
              <template v-else>
                {{ row.expect_delivery_time }}
              </template>
            </template>
          </vxe-column>
          <vxe-column title="工厂可交货时间" field="factory_time" :min-width="100"></vxe-column>
          <vxe-column title="物流信息" :min-width="140">
            <template #default="{ row }">
              <VMore>
                <template #default="line">
                  <div class="w-full" v-for="(d, i) in row.skuTracking" :key="i">
                    <VText title="物流单号" :value="d.tracking_no" :line="line" />
                    <VText title="快递公司" :value="d.tracking_supplier" :line="line" />
                  </div>
                </template>
              </VMore>
            </template>
          </vxe-column>
          <vxe-column title="发货信息" :min-width="280">
            <template #default="{ row }">
              <el-tooltip effect="dark" :content="row.deliver_data_name" placement="top">
                <div class="line-3">
                  <VMore>
                    <template #default="line">
                      <div class="w-full" v-for="(d, i) in row.deliver_data" :key="i">
                        <VText title="发货单号" :value="d.deliver_no" :line="line" />
                        <VText title="预计发货日期" :value="d.except_deliver_time" :line="line" />
                      </div>
                    </template>
                  </VMore>
                </div>
              </el-tooltip>
            </template>
          </vxe-column>
          <vxe-column title="入库数量" :min-width="140">
            <template #default="{ row }">
              <VText :value="row.inbound_num" />
            </template>
          </vxe-column>
          <vxe-column title="外验信息" :min-width="250">
            <template #default="{ row }">
              <VMore>
                <template #default>
                  <div class="w-full" v-for="(d, i) in row.inspection_data" :key="i">
                    <VText title="预计外验时间" :value="d.inspection_time" />
                    <VText title="QA验货时间" :value="d.qa_inspection_time" />
                  </div>
                </template>
              </VMore>
            </template>
          </vxe-column>
        </vxe-table>

      </div>
      <div>
        <div class="v-title my-3">付款信息</div>
        <vxe-table ref="tableRef" :data="form.payment" size="small" :show-overflow="true" :max-height="560" :row-config="{height: 80}">
          <vxe-column title="付款单号" :min-width="140">
            <template #default="{ row }">
              <VText :value="row.payment_no" />
            </template>
          </vxe-column>
          <vxe-column title="请款人/请款时间" :min-width="160">
            <template #default="{ row }">
              <VText :value="row.create_user" />
              <VText :value="row.create_time" />
            </template>
          </vxe-column>
          <vxe-column title="付款状态" field="payment_status_name" :min-width="80" />
          <vxe-column title="结算方式" field="period_name" :min-width="100">
            <template #default="{row}">
              <VText :value="row.period_name" :line="3" />
            </template>
          </vxe-column>
          <vxe-column title="期望付款时间" field="except_payment_time" :min-width="150" />
          <vxe-column title="申请付款金额" field="apply_price" :min-width="110" />
          <vxe-column title="实际付款金额" field="payment_price" :min-width="110" />
          <vxe-column title="优惠/折扣/售后" :min-width="120">
            <template #default="{ row }">
              <VText title="优惠" :value="row.discount_price" />
              <VText title="折扣" :value="row.preferential_price" />
              <VText title="售后" :value="row.after_sale_price" />
            </template>
          </vxe-column>
          <vxe-column title="付款人/付款时间" :min-width="160">
            <template #default="{ row }">
              <VText :value="row.payment_user" />
              <VText :value="row.payment_time" />
            </template>
          </vxe-column>
          <vxe-column title="付款凭证" field="payment_voucher" :min-width="120">
            <template #default="{ row }">
              <VText :value="row.payment_voucher" type="link" line="3" @click="viewImageRef.open(row.payment_voucher)" />
            </template>
          </vxe-column>
          <vxe-column title="备注" field="remark" :min-width="120">
            <template #default="{ row }">
              <VText :value="row.remark" line="3" />
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div>
        <div class="v-title my-3">入库信息</div>
        <vxe-table ref="tableRef" :data="form.inbound" size="small">
          <vxe-column title="入库单号" :min-width="170">
            <template #default="{ row }">
              <VText :value="row.inbound_no" />
            </template>
          </vxe-column>
          <vxe-column title="入库仓" field="inbound_warehouse" :min-width="140" />
          <vxe-column title="sku" field="sku" :min-width="100" />
          <vxe-column title="收货数量" field="deliver_num" :min-width="80" />
          <vxe-column title="质检数量" field="qa_num" :min-width="80" />
          <vxe-column title="良品数" field="quality_num" :min-width="80" />
          <vxe-column title="不良品数" field="reject_num" :min-width="80" />
          <vxe-column title="入库数" field="inbound_num" :min-width="80" />
          <vxe-column title="入库人" field="create_user" :min-width="100" />
          <vxe-column title="时间" field="inbound_time" :min-width="220">
            <template #default="{ row }">
              <div><span class='text-gray-500'>签收时间: </span>{{ row.sign_time }}</div>
              <div><span class='text-gray-500'>质检时间: </span>{{ row.qa_time }}</div>
              <div><span class='text-gray-500'>入库上架: </span>{{ row.inbound_time }}</div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div>
        <div class="v-title my-3"> 异常处理信息</div>
        <vxe-table ref="tableRef" :data="form.abnormal" size="small">
          <vxe-column title="异常单号" :min-width="140">
            <template #default="{ row }">
              <el-link type='primary'>{{ row.abnormal_no }}</el-link>
            </template>
          </vxe-column>
          <vxe-column title="sku" field="sku" :min-width="100" />
          <vxe-column title="异常单状态" field="abnormal_status_name" :min-width="100" />
          <vxe-column title="异常类型" field="abnormal_method_name" :min-width="80" />
          <vxe-column title="异常原因" field="abnormal_reason_name" :min-width="100">
            <template #default="{ row, rowIndex }">
              <VMore :key="rowIndex">
                <template #default>
                  <VText v-for="(d, i) in row.abnormal_reason_name" :key="i" :value="d" />
                </template>
              </VMore>
            </template>
          </vxe-column>
          <vxe-column title="下单数量" field="purchase_num" :min-width="80" />
          <vxe-column title="收货数量" field="deliver_num" :min-width="80" />
          <vxe-column title="良品数量" field="quality_num" :min-width="80" />
          <vxe-column title="入库数量" field="inbound_num" :min-width="80" />
          <vxe-column title="不良数量" field="reject_num" :min-width="80" />
          <vxe-column title="质检人/质检时间" :min-width="180">
            <template #default="{ row }">
              <VText :value="row.qa_actually_user" />
              <VText :value="row.qa_time" />
            </template>
          </vxe-column>
          <vxe-column title="仓库处理人/处理时间" :min-width="180">
            <template #default="{ row }">
              <VText :value="row.warehouse_user" />
              <VText :value="row.warehouse_time" />
            </template>
          </vxe-column>
          <vxe-column title="处理方式" field="process_type_name" :min-width="100" />
        </vxe-table>
      </div>
      <div>
        <div class="v-title my-3">退款信息</div>
        <vxe-table ref="tableRef" :data="form.refund" size="small">
          <vxe-column title="退款单号" :min-width="140">
            <template #default="{ row }">
              <el-link type='primary'>{{ row.refund_no }}</el-link>
            </template>
          </vxe-column>
          <vxe-column title="sku" field="sku" :min-width="100" />
          <vxe-column title="下单金额" :min-width="90">
            <template #default="{ row }">
              {{ form.basic.is_drawback === 2 ?
                row.total_purchase_price_tax : row.total_purchase_price }}
            </template>
          </vxe-column>
          <vxe-column title="运费" field="tracking_price" :min-width="90" />
          <vxe-column title="优惠" field="discount_price" :min-width="90" />
          <vxe-column title="可退金额" field="can_refund_price" :min-width="90" />
          <vxe-column title="到货金额" field="deliver_price" :min-width="90" />
          <vxe-column title="已付金额" field="payment_price" :min-width="90" />
          <vxe-column title="未到货金额" field="not_deliver_price" :min-width="120" />
          <vxe-column title="申请退款金额" field="apply_price" :min-width="120" />
          <vxe-column title="申请退运费" field="apply_tracking_price" :min-width="120" />
        </vxe-table>
      </div>
      <div>
        <div class="v-title my-3">发票信息</div>
        <vxe-table ref="tableRef" :data="form.invoice" size="small">
          <vxe-column title="发票类型" field="invoice_type_name" :min-width="90" />
          <vxe-column title="开票清单号" field="billing_no" :min-width="140" />
          <vxe-column title="SKU" field="sku" :min-width="120" />
          <vxe-column title="开票品名" field="invoice_name" :min-width="120">
            <template #default="{ row }">
              <VText :value="row.invoice_name" />
            </template>
          </vxe-column>
          <vxe-column title="开票单位" field="invoice_unit" :min-width="120">
            <template #default="{ row }">
              <VText :value="row.invoice_unit" />
            </template>
          </vxe-column>
          <vxe-column title="开票不含税单价" field="unit_price" :min-width="90" />
          <vxe-column title="发票税率" field="rate" :min-width="90" />
          <vxe-column title="发票代码" field="invoice_code" :min-width="90" />
          <vxe-column title="发票号码" field="invoice_no" :min-width="90" />
          <vxe-column title="发票数量" field="invoice_num" :min-width="90" />
          <vxe-column title="开票不含税金额" field="total_price" :min-width="90" />
          <vxe-column title="发票行号" field="invoice_line" :min-width="90" />
        </vxe-table>
      </div>
      <div>
        <div class="v-title my-3">日志信息</div>
        <vxe-table :data="form.log" size="small" :show-overflow="true" :max-height="560" :row-config="{height: 60}">
          <vxe-column title="操作人" field="create_user"></vxe-column>
          <vxe-column title="操作类型" field="log_type"></vxe-column>
          <vxe-column title="详情" field="log_info" min-width="300">
            <template #default="{row}">
              <VText :value="row.log_info" :line="2" />
            </template>
          </vxe-column>
          <vxe-column title="操作时间" field="create_time"></vxe-column>
        </vxe-table>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
    <el-dialog v-if="form.basic.platform_data" title="1688平台信息" v-model="platformVisible" width="800px">
      <div class="grid grid-cols-2 gap-y-2 text-gray-950">
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">平台订单号</span>{{ form.basic.platform_order_no
        }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">买家会员登录名</span>{{
          form.basic.platform_data.alibaba_account
        }}</div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">平台供应商公司名称</span>{{
          form.basic.platform_data.supplier_name }}</div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">买家支付宝账号</span>{{
          form.basic.platform_data.alipay_account
        }}</div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">订单状态</span>{{
          form.basic.platform_data.order_status }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">卖家手机</span>{{
          form.basic.platform_data.seller_phone }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">交易方式</span>{{
          form.basic.platform_data.trade_type }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">平台下单数量及金额</span>数量: {{
          form.basic.platform_data.order_num }} <span class="ml-3">总金额: {{ form.basic.platform_data.total_price }}</span>
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">结算方式</span>{{
          form.basic.platform_data.period_type }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">运费</span>{{
          form.basic.platform_data.tracking_price }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">1688结算日期</span>{{
          form.basic.platform_data.settlement_day
        }}</div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">优惠金额</span>{{
          form.basic.platform_data.discount_price }}
        </div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">1688物流状态</span>{{
          form.basic.platform_data.tracking_info[0] && form.basic.platform_data.tracking_info[0].status || '-'
        }}</div>
        <div class="flex"><span class="inline-block w-32 mr-2 text-gray-500">退款金额</span>{{
          form.basic.platform_data.refund_price }}
        </div>
        <div class="flex col-span-2"><span class="inline-block w-32 mr-2 text-gray-500">买家留言</span>{{
          form.basic.platform_data.message }}
        </div>
      </div>
    </el-dialog>
    <VHistory ref="historyRef" />
    <ViewImage ref="viewImageRef" />
    <Tracking ref="trackingRef" />
  </el-dialog>
</template>

<script setup>
import api from '../api'
import { ElMessage } from 'element-plus'
import VHistory from '@/components/VHistory'
import { to } from '@/utils/action'
import Tracking from './Tracking'

const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])

const load = ref(false)
const visible = ref(false)
const platformVisible = ref(false)
let loadings = reactive({})
const historyRef = ref()
const trackingRef = ref()

const viewImageRef = ref()

// 表单处理
const formRef = ref()
const form = ref({})

// 打开弹窗
const open = async (id) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  //新增
  form.value = {
    basic: {},
    sku: [],
    payment: [],
    inbound: [],
    abnormal: [],
    refund: [],
    log: [],
  }
  loadings = reactive({})
  visible.value = true
  formRef?.value?.resetFields()

  loadings.detail = true
  const res = await api.detail({ p_id: id })
  res?.data?.sku?.forEach(i => {
    i.deliver_data_name = i.deliver_data.map(d => `发货单号:${d.deliver_no}`).join(',')
  });
  form.value = res.data
  loadings.detail = false
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}
// 提交
const create = async (formRef) => {
  const validator = await formRef.validate()
  if (!validator) return
  loadings.create = true
  api.create(form.value).then(res => {
    ElMessage.success('保存成功')
    emit('success')
    close()
  }).finally(() => {
    loadings.create = false
  })
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.line-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>